<template>
	<view
	@touchstart="handleTouchstart"
	@touchend="handleTouchend"
	>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime: 0,
				startX: 0,
				startY: 0
			}
		},
		methods: {
			handleTouchstart(e) {
				this.startTime = Date.now();
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
			},
			handleTouchend(e) {
				const endTime = Date.now();
				const endX = e.changedTouches[0].clientX;
				const endY = e.changedTouches[0].clientY;
				if(endTime - this.startTime > 2000) {
					return
				}
				
				//滑动方向
				let direction = "";
				if(Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
					direction = endX - this.startX > 10 ? "right" : "left";
				}else {
					return
				}
				
				this.$emit('swiperaction', {direction})
			}
		}
	}
</script>

<style>

</style>
